<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: sunxiantao
 * @Date: 2022-10-19 17:27:56
 * @LastEditors: sunxiantao
 * @LastEditTime: 2022-10-19 18:27:19
-->

<template>
  <div id="addUser">
    <el-row type="flex" justify="space-around">
      <el-col :span="20">
        <div class="tablewrap" style="height: 100%; overflow-y: auto">
          <div class="search-inner">
            <el-row>
              <el-col :span="6">
                <div class="search-inner-item">
                  <div class="item-label">抽奖名称</div>
                  <el-input v-model.trim="search.activityName" style="width: 90%" class="filter-item" placeholder="请输入抽奖名称搜索" />
                </div>
              </el-col>
              <el-col :span="6" style="margin-bottom: 10px">
                <div class="search-inner-item">
                  <div class="item-label">&nbsp;</div>
                  <el-button v-waves class="search-btn" @click="resetting">重置</el-button>
                  <el-button v-waves style="margin-right: 10px" class="search-btn" type="primary" @click="handleFilter">搜索</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-table
            ref="rolemantable"
            v-loading="listLoading"
            :data="dialogList"
            class="tableScope"
            height="310"
            width="100%"
            highlight-current-row
            @select="selectRow"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="activityName" label="活动名称" show-overflow-tooltip />
            <el-table-column prop="activityExplain" label="活动说明" show-overflow-tooltip />
            <el-table-column prop="drawFormName" label="抽奖类型" show-overflow-tooltip />
            <el-table-column prop="activityStartTime" label="开始时间" show-overflow-tooltip />
            <el-table-column prop="activityEndTime" label="结束时间" show-overflow-tooltip />
            <el-table-column prop="statusName" label="状态" show-overflow-tooltip />
          </el-table>
          <div class="btn-pagion fix">
            <pagination :total="dialogTotal" :page.sync="dialogListQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <p>已选择抽奖活动：</p>
        <p>{{ dialogMultipleSelection }}</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryIntegralPage } from '../api.js'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves' // Waves directive

export default {
  name: 'IntegralConfig',
  components: { Pagination },
  directives: { waves },
  props: {
    bigturntableId: {
      type: String
    }
  },
  data() {
    return {
      listLoading: false,
      dialogTotal: 0,
      dialogMultipleSelection: '',
      search: {
        activityName: ''
      },
      breadList: [],
      dialogList: [],
      dialogListQuery: {
        page: 1,
        limit: 10
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      curNodeOrgIdOrDeptId: {
        orgId: '',
        deptId: ''
      }
    }
  },
  // mounted() {
  //   this.$refs.rolemantable.toggleRowSelection(activityName, true);
  // },
  created() {
    this.getList()
  },
  methods: {
    selectRow(val, row) {
      console.log(row)
      this.$refs.rolemantable.clearSelection()
      this.$refs.rolemantable.toggleRowSelection(row, true)
      this.seriesId = row.id
      if (row.status === 'BIGTSTATUS02') {
        this.$message({
          message: '该抽奖配置未启用',
          type: 'warning'
        })
      } else {
        this.$emit('userData', row)
        this.dialogMultipleSelection = row.activityName
      }
    },

    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    /*
     * 搜索添加用户列表
     */
    handleFilter() {
      this.getList()
    },
    /*
     * 重置人员列表
     * */
    resetting() {
      this.dialogListQuery.page = 1
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.getList()
    },
    // 重置所有
    resettingall() {
      this.resetting()
      this.$nextTick(() => {
        this.$refs.qyTree.clearSearchTree()
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        activityName: this.search.activityName,
        status: 'ZT01'
      }
      return new Promise((resolve, reject) => {
        queryIntegralPage(query)
          .then((response) => {
            this.dialogList = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
            this.$nextTick(function() {
              this.dialogList.forEach((row) => {
                console.log('11', row)
                if (row.id === this.bigturntableId) {
                  this.$refs.rolemantable.toggleRowSelection(row, true)
                  this.dialogMultipleSelection = row.activityName
                }
              })
            })
          })
          .catch((error) => {
            reject(error)
            this.listLoading = false
          })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
#addUser {
  .tablewrap {
    padding-left: 20px;
    border-left: 1px solid #e2e3e8;
    position: relative;
    top: -10px;
    padding-top: 20px;
  }
  .search-inner {
    margin-bottom: 10px;
    .search-inner-item {
      margin-bottom: 10px;
      .item-label {
        margin-bottom: 10px;
      }
    }
    .span {
      overflow: hidden;
      display: inline-block;
    }
    .btn-container-title-select {
      display: inline-block;
      width: 744px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include font-color($mainColor);
    }
  }
  .selectUser {
    padding: 0;
    margin-top: 30px;
    height: 355px;
    overflow: auto;
    list-style: none;
    li {
      padding: 5px 8px;
      margin: 0;
      float: left;
      list-style: none;
      font-size: 14px;
      @include font-color($mainColor);
      @include border-color(1px, solid, $mainColor);
      border-radius: 5px;
      margin-left: 8px;
      margin-bottom: 8px;
    }
  }
  .checkTable > .el-table__header-wrapper > table > thead > tr > th:first-child > div {
    display: none !important;
  }
}
</style>
